<template>
  <div class="personal-info-edit">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-width="120px"
      label-position="left"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="学号" prop="studentId">
            <el-input
              v-model="formData.studentId"
              placeholder="请输入学号"
              :disabled="loading"
            />
          </el-form-item>
        </el-col>
        
        <el-col :span="12">
          <el-form-item label="性别" prop="sex">
            <el-select
              v-model="formData.sex"
              placeholder="请选择性别"
              style="width: 100%"
              :disabled="loading"
            >
              <el-option label="男" :value="1" />
              <el-option label="女" :value="0" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="联系电话" prop="contactPhone">
            <el-input
              v-model="formData.contactPhone"
              placeholder="请输入联系电话"
              :disabled="loading"
            />
          </el-form-item>
        </el-col>
        
        <el-col :span="12">
          <el-form-item label="紧急联系人" prop="emergencyContact">
            <el-input
              v-model="formData.emergencyContact"
              placeholder="请输入紧急联系人"
              :disabled="loading"
            />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="紧急联系电话" prop="emergencyPhone">
            <el-input
              v-model="formData.emergencyPhone"
              placeholder="请输入紧急联系电话"
              :disabled="loading"
            />
          </el-form-item>
        </el-col>
      </el-row>
      
      <!-- 只读信息展示 -->
      <el-divider content-position="left">只读信息</el-divider>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="姓名">
            <el-input :value="studentInfo.name || '暂无'" disabled />
          </el-form-item>
        </el-col>
        
        <el-col :span="12">
          <el-form-item label="专业">
            <el-input :value="studentInfo.majorName || '暂无'" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="班级">
            <el-input :value="studentInfo.className || '暂无'" disabled />
          </el-form-item>
        </el-col>
        
        <el-col :span="12">
          <el-form-item label="宿舍">
            <el-input 
              :value="getDormInfo()" 
              disabled 
            />
          </el-form-item>
        </el-col>
      </el-row>
      
      <!-- 操作按钮 -->
      <el-form-item>
        <el-button 
          type="primary" 
          @click="handleSave"
          :loading="loading"
        >
          保存修改
        </el-button>
        <el-button @click="handleCancel">
          取消
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, watch, defineProps, defineEmits } from 'vue'
import { ElMessage } from 'element-plus'

// 定义props和emits
const props = defineProps({
  studentInfo: {
    type: Object,
    default: () => ({})
  },
  loading: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['save', 'cancel'])

// 表单引用
const formRef = ref()

// 表单数据
const formData = reactive({
  userId: '',
  studentId: '',
  sex: '',
  contactPhone: '',
  emergencyContact: '',
  emergencyPhone: ''
})

// 表单验证规则
const rules = {
  studentId: [
    { required: true, message: '请输入学号', trigger: 'blur' },
    { min: 1, max: 20, message: '学号长度在 1 到 20 个字符', trigger: 'blur' }
  ],
  sex: [
    { required: true, message: '请选择性别', trigger: 'change' }
  ],
  contactPhone: [
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  emergencyPhone: [
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的紧急联系电话', trigger: 'blur' }
  ]
}

// 监听studentInfo变化，更新表单数据
watch(() => props.studentInfo, (newInfo) => {
  if (newInfo) {
    formData.userId = newInfo.userId || newInfo.id || ''
    formData.studentId = newInfo.studentId || ''
    formData.sex = newInfo.sex
    formData.contactPhone = newInfo.contactPhone || ''
    formData.emergencyContact = newInfo.emergencyContact || ''
    formData.emergencyPhone = newInfo.emergencyPhone || ''
  }
}, { immediate: true, deep: true })

// 获取宿舍信息
const getDormInfo = () => {
  const { dormBuilding, roomNumber } = props.studentInfo
  if (dormBuilding && roomNumber) {
    return `${dormBuilding} - ${roomNumber}`
  }
  return '暂无'
}

// 保存修改
const handleSave = async () => {
  try {
    await formRef.value.validate()
    
    // 构建更新数据，按照API要求的完整格式
    const updateData = {
      classId: props.studentInfo.classId || 0,
      contactPhone: formData.contactPhone || '',
      dormId: props.studentInfo.dormId || 0,
      emergencyContact: formData.emergencyContact || '',
      emergencyPhone: formData.emergencyPhone || '',
      id: props.studentInfo.id || 0,
      idCard: props.studentInfo.idCard || '',
      majorId: props.studentInfo.majorId || 0,
      name: props.studentInfo.name || '',
      photo: props.studentInfo.photo || '',
      sex: formData.sex || 0,
      studentId: formData.studentId || '',
      userId: formData.userId || 0
    }
    
    emit('save', updateData)
  } catch (error) {
    ElMessage.error('请检查表单输入')
  }
}

// 取消编辑
const handleCancel = () => {
  emit('cancel')
}
</script>

<style scoped>
.personal-info-edit {
  padding: 20px 0;
}

:deep(.el-form-item__label) {
  font-weight: 600;
  color: #303133;
}

:deep(.el-input.is-disabled .el-input__inner) {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #c0c4cc;
}

:deep(.el-divider__text) {
  background-color: #fff;
  color: #909399;
  font-weight: 500;
}

.el-button {
  margin-right: 10px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  :deep(.el-form-item) {
    margin-bottom: 18px;
  }
  
  :deep(.el-form-item__label) {
    line-height: 32px;
  }
}
</style>